HTML 起手式


Posted by mijouhsieh on 2023-04-04

設定 viewport 的目的是告訴瀏覽器 viewport 的寬度以什麼為基準,以及這個寬度和 CSS 之間的比例關係。需要在 HTML 的 <head> 裡加入:

<meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width 讓網頁內容與裝置螢幕寬度一致。
    • 如果寫 width=320px,那麼當螢幕尺寸改變時,viewport 的寬度仍是 320px,這樣網頁內容就會 被縮放
  • initial-scale=1.0 設定「CSS 像素」和「裝置像素」的比例為 1:1。
  • 編輯器的 Emmet 套件來創建 HTML 文件,這行設定會被自動帶入預設內容。

開始使用 meta viewport 標籤設定網站時,由於不同裝置有不同的螢幕解析度和像素密度,在定義頁面元素的時候應習慣使用「相對寬度」 而不是用「絕對寬度」,這樣可確保元素符合 viewport 大小










Related Posts

簡明 Vim 文字編輯器操作入門教學

簡明 Vim 文字編輯器操作入門教學

物件導向設計的五個基本原則 SOLID

物件導向設計的五個基本原則 SOLID

Checked and Unchecked Exception in Java

Checked and Unchecked Exception in Java


Comments